---
title: 从 Eleventy 迁移到 Astro
description: 将现有的 Eleventy 项目迁移到 Astro 的提示
sidebar:
  label: Eleventy
type: migration
framework: Eleventy
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps, LinkCard, CardGrid } from '@astrojs/starlight/components';

[Eleventy](https://11ty.dev) 是一个支持多种模板语言的开源静态站点生成器。

## Eleventy (11ty) 和 Astro 的主要相似之处

Eleventy (11ty) 和 Astro 有一些相似之处，这将帮助你迁移你的项目：

- Astro 和 Eleventy 都是现代的、基于JavaScript的（Jamstack）网站构建工具。

- Astro 和 Eleventy 都允许你使用[无头（headless）CMS，API 或 Markdown 文件获取数据](/zh-cn/guides/data-fetching/)。你可以继续使用你喜欢的内容创作系统，并能保留你现有的内容。

- Astro 和 Eleventy 都能构建多页面应用。

## Eleventy (11ty) 和 Astro 主要差异

当你在 Astro 中重建你的 Eleventy (11ty) 站点时，你会注意到一些重要的区别：

- Eleventy 支持多种模板语言。Astro 支持[包含来自几个流行的JS框架（例如 React，Svelte，Vue，Solid）的组件](/zh-cn/guides/framework-components/)，但大部分页面模板都使用 [Astro布局，页面和组件](/zh-cn/basics/astro-components/)。

- Astro 在所有文件中使用[`src/`目录](/zh-cn/basics/project-structure/#src)，包括站点元数据，这些文件在站点构建过程中可用于查询和处理。其中包含一个[特殊的 `src/pages/` 文件夹用于文件路由](/zh-cn/basics/astro-pages/)。

- Astro 使用[`public/` 文件夹存储不需要在构建过程中处理或转换的静态资源](/zh-cn/basics/project-structure/#public)。

- 在 Eleventy 中，必须手动配置 CSS，JavaScript 和其他资产的打包。[Astro 为你提供开箱即用的处理方式](/zh-cn/concepts/why-astro/#易于使用)。

## 从 Eleventy 切换到 Astro

要将 Eleventy 博客转换为 Astro，首先从我们的博客主题启动模板开始，或者在我们的[主题展示](https://astro.build/themes/)中探索更多社区博客主题。

你可以向`create astro`命令传递一个`--template`参数，以使用我们的官方启动器开始一个新的 Astro 项目。或者，你可以[从 GitHub 上的任何现有 Astro 库开始一个新项目](/zh-cn/install-and-setup/#通过-cli-向导安装)

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template blog
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template blog
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template blog
    ```
    </Fragment>
  </PackageManagerTabs>

将你现有的 Markdown（或 MDX，通过我们可选的集成）文件作为内容，[创建 Markdown 或 MDX 页面](/zh-cn/guides/markdown-content/)。

你的 Eleventy 项目允许你使用各种模板语言来构建你的网站。在 Astro 项目中，你的页面模板大部分将使用Astro 组件，这些组件可以作为 UI 元素，布局甚至完整的页面。你可能想要探索 [Astro 的组件语法](/zh-cn/basics/astro-components/)，看看如何使用组件在 Astro 中进行模板化。

要转换其他类型的网站，例如作品集或文档站点，请在 [astro.new](https://astro.new) 上查看更多官方启动器模板。你会找到每个项目的 GitHub 仓库的链接，以及一键链接到 IDX，StackBlitz，CodeSandbox 和 Gitpod 在线开发环境中的有效项目。

## 社区资源

<CardGrid>

  <LinkCard title="此网站现在使用 Astro 构建" href="https://aqandrew.com/blog/now-built-with-astro/" description="为什么我从 Eleventy 迁移了"/>

  <LinkCard title="网站重构：2025" href="https://www.welchcanavan.com/posts/site-rewrite-2025/" />

</CardGrid>

:::note[有想要分享的资源吗？]
如果你找到（或制作）了关于将 Eleventy 网站转换为 Astro 的有用的视频或博客文章，请将其 [添加到这个列表中](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/migrate-to-astro/from-eleventy.mdx)！
:::
